<script setup>
import {onMounted, ref} from "vue";
import api from "axios";
import {ElMessage} from 'element-plus'
import {useRouter} from "vue-router";
import useTokenStore from "../stores/useToken.js";

const aa = ref("")
const bb = ref(10)

aa.value = "12345678900000"
bb.value = bb.value + 10000

console.log(aa.value);
console.log(bb.value);

const ruleFormRef = ref()

const codeImage = ref('')
const loginFrom = ref({
  username: '',
  password: '',
  codeValue: '',
  rememberMe: false
})
const LoginRules = ref({

  username: [
    {required: true, message: '请输入用户名', trigger: 'blur'}
  ],
  password: [
    {required: true, message: '请输入密码', trigger: 'blur'},
    {min: 6, max: 12, message: '长度在 6 到 12 个字符', trigger: 'blur'}
  ],
  codeValue: [
    {required: true, message: '请输入验证码', trigger: 'blur'}
  ]
})
const isRegister = ref(false);

const tokenStore = useTokenStore();

const router = useRouter();
const getLogin = async (formEl) => {
  if (!formEl) return;

  await formEl.validate((valid, fields) => {
    if (valid) {
      console.log('submit!');
    } else {
      ElMessage('请输入完整信息');
      return;
    }
  });
  await api.post('/api/user/login', loginFrom.value)
    .then(response => {
      console.log(response)
      if (response.data.code === 200) {
        ElMessage('登录成功');
        console.log(response.data);
        tokenStore.token = response.data.data;
        router.replace({name: 'Index'});
      } else {
        ElMessage('登录失败');
        ElMessage('失败原因：' + response.data.message);
      }
    })
};
const getCode = async () => {
    api.get('/api/getCaptcha')
      .then(response => {
        console.log(response)
        loginFrom.value.codeKey = response.data.data.codeKey;
        codeImage.value = response.data.data.codeValue;
        console.log(codeImage.value);
      })
      .catch((error) => {
        console.error(error);
      });
}

onMounted(() => {
  getCode()
})
</script>
<template>
  <div style="width: 100vw;height: 100vh;background-color: aquamarine">
    <div class="login-container">
      <el-row type="flex" justify="center">
        <el-col :span="13" class="img-box"></el-col>
        <el-col :span="11" class="login-box">
          <div class="login">
            <h2 style="text-align: center;margin-bottom: 50px">金管家 · 账单系统</h2>
            <el-form :model="loginFrom" label-width="100px" label-position="right" :rules="LoginRules" ref="ruleFormRef">
              <el-form-item label="管理员账号" prop="username">
                <el-input v-model="loginFrom.username" placeholder="请输入用户名" clearable>
                  <template #prefix>
                    <el-icon>
                      <Avatar/>
                    </el-icon>
                  </template>
                </el-input>
              </el-form-item>
              <el-form-item label="管理员密码" prop="password">
                <el-input v-model="loginFrom.password" placeholder="请输入密码" type="password" show-password clearable>
                  <template #prefix>
                    <el-icon>
                      <Lock/>
                    </el-icon>
                  </template>
                </el-input>
              </el-form-item>
              <el-form-item label="验证码" prop="codeValue">
                <el-input v-model="loginFrom.codeValue" style="width: 100px;" clearable>
                </el-input>
                <img :src="codeImage" @click="getCode" style="transform: scale(0.9);"/>
              </el-form-item>
              <el-form-item>
                <el-checkbox v-model="loginFrom.save">记住密码</el-checkbox>
              </el-form-item>
              <el-form-item>
                <el-button type="primary" style="width: 100%;background-color: aquamarine;border-color: aquamarine"
                           @click="getLogin(ruleFormRef)">登录
                </el-button>
              </el-form-item>
            </el-form>
          </div>
        </el-col>
      </el-row>
    </div>
  </div>
</template>
<style scoped>
.login-container {
  position: relative;
  top: 150px;
  width: 50vw;
  height: 500px;
  margin: 0 auto;
  border-radius: 0.5em;
  overflow: hidden;
}

.img-box {
  width: 100%;
  height: 500px;
  background-image: url("../../public/logboxImg.jpg");
  background-size: 100% 100%;
}

.login-box {
  background-color: white;
}

.login {
  width: 86%;
  position: relative;
  top: 80px;
  margin: 0 auto;
  height: 300px;
}
</style>
